<template>
	<view>
		<!-- <u-navbar :is-back="true" title="房源列表" :border-bottom="false"></u-navbar> -->
		<u-sticky offset-top="0">
			<view class="sticky">
				<!-- <filterDropdown :menuTop="0" :filterData="filterData" :defaultSelected="defaultSelected"
					:updateMenuName="true" @confirm="confirm" dataFormat="Object"></filterDropdown> -->
			</view>
		</u-sticky>
		<view class="u-p-l-10 u-p-r-10 waterfall">
			<u-waterfall v-model="flowList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<waterfall-item :item="item" v-for="(item, index) in leftList" :key="item.id"></waterfall-item>
				</template>
				<template v-slot:right="{rightList}">
					<waterfall-item :item="item" v-for="(item, index) in rightList" :key="item.id"></waterfall-item>
				</template>
			</u-waterfall>
			<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="findHouseList"
				style="height: 80rpx;line-height: 80rpx;"></u-loadmore>
			<u-back-top :scroll-top="scrollTop" top="1000"></u-back-top>
			<u-no-network></u-no-network>
		</view>
	</view>
</template>

<script>
	import config from "@/common/config.js" // 全局配置文件
	import searchData from '@/common/utils/searchData.js'; //筛选菜单数据
	import filterDropdown from '@/components/zy/filterDropdown.vue';
	import {
		getDictType,
		findHouseRoomList,
		findVillageList
	} from "@/common/api.js";
	import WaterfallItem from "@/components/WaterfallItem"

	export default {
		components: {
			filterDropdown,
			WaterfallItem
		},
		data() {
			return {
				indexArr: [],
				valueArr: [],
				defaultSelected: [],
				filterData: [],
				searchData: {
					type: undefined,
					villageName: undefined
				},
				pageNum: 1,
				pageSize: 20,
				scrollTop: 0,
				houseList: [],
				loadStatus: 'loadmore',
				flowList: [],
			}
		},
		onLoad(option) {
			let type = option.type
			let villageName = option.villageName
			this.searchData = {}
			if (type) {
				this.searchData.type = type
			}
			if (villageName) {
				this.searchData.villageName = villageName
			}
			// 获取房源数据
			this.findHouseList();
			// 获取小区数据
			this.findVillageList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			// 获取数据
			this.findHouseList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.pageNum = 1
			this.flowList = []
			this.$refs.uWaterfall.clear();
			// 获取数据
			this.findHouseList();
			// 关闭刷新
			uni.stopPullDownRefresh();
		},
		methods: {
			findHouseList() {
				let defaultData = {
					state: 0,
					villageCity: uni.getStorageSync('lifeData').vuex_city,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					orderByColumn: 'update_time,create_time',
					isAsc: 'desc'
				}
				findHouseRoomList({
					...defaultData,
					...this.searchData
				}).then(result => {

					console.log(this.searchData,888);
					console.log(result);
					const data = result.rows;
					if (this.pageNum > 1 && data.length < this.pageSize) {
						return this.loadStatus = 'nomore';
					}
					this.flowList = data;
					++this.pageNum
					this.loadStatus = 'loadmore';
				})


			},
			findVillageList() {
				findVillageList({
					city: uni.getStorageSync('lifeData').vuex_city,
					orderByColumn: 'name',
					isAsc: 'desc'
				}).then(result => {
					const data = result.rows
					for (let i = 0; i < data.length; i++) {
						// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
						let item = data[i]
						searchData[0].submenu.push({
							name: item.name,
							value: item.name
						})
					}
					this.filterData = searchData;
				});
			},
			clickImage(houseId) {
				this.$u.route({
					url: '/pages/detail/detail',
					params: {
						houseId: houseId
					}
				})
			},
			//接收菜单结果
			confirm(e) {
				let type = e.value[1][0]
				let villageName = e.value[0][0]
				let price = e.value[2][0]
				let combo = e.value[3]
				let houseNum = combo[0]
				let decoration = combo[1]
				let feature = combo[2]
				this.searchData = {}
				if (type) {
					this.searchData.type = type
				}
				if (villageName) {
					this.searchData.villageName = villageName
				}
				if (price) {
					this.searchData.price = price
				}
				if (houseNum && houseNum.length > 0) {
					this.searchData.houseNum = houseNum.toString()
				}
				if (decoration && decoration.length > 0) {
					this.searchData.decoration = decoration.toString()
				}
				if (feature && feature.length > 0) {
					this.searchData.feature = feature.toString()
				}
				this.pageNum = 1
				this.houseList = []
				this.flowList = []
				this.$refs.uWaterfall.clear();
				this.findHouseList()
			},
			code() {
				this.$mytip.toast('请咨询技术支持')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.waterfall {
		// padding-top: 85rpx;
	}

	.nomore {
		background-color: $u-bg-color;
	}

	.search {
		width: 54px;
		height: 44px;

		&:active {
			background-color: $u-bg-color;
		}
	}

	.rowClass {
		border-radius: 8px;
		background-color: rgb(255, 255, 255);
		margin-top: 10rpx;
	}

	.hoverClass {
		background-color: #E4E7ED;
	}

	.tabName {
		font-size: 28rpx;
		color: $u-main-color;
	}

	.demo-warter {
		border-radius: 8px;
		margin-top: 3px;
		background-color: #ffffff;
		padding: 3px;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}

	.item-cover {
		font-size: 55rpx;
		color: $u-type-warning;
	}

	.item-title {
		font-size: 28rpx;
		color: $u-main-color;
		font-weight: bold;
		padding-top: 5rpx;
		padding-left: 10rpx;
	}

	.item-price {
		font-weight: normal;
		font-size: 32rpx;
		color: $u-type-warning;
	}

	.item-desc {
		font-weight: normal;
		font-size: 26rpx;
		color: $u-tips-color;
		padding-bottom: 5rpx;
		padding-left: 10rpx;
	}

	.item-tag {
		font-size: 24rpx;
		color: $u-tips-color;
		margin-top: 3px;
	}
</style>